<script lang="ts" setup>
import { merge } from 'lodash-es'

const tableData = ref<ISubConference[]>([
  {
    id: 1,
    title: '会议议题1',
  },
  {
    id: 2,
    title: '会议议题1',
  },
  {
    id: 3,
    title: '会议议题1',
  },
  {
    id: 4,
    title: '会议议题1',
  },
])
const formModel = reactive<ISubConference>({
  id: -1,
  title: '',
})
const dialogVisible = ref(false)
const isDialogEdit = ref(false)

// 打开新增模态框
function add() {
  isDialogEdit.value = false
  dialogVisible.value = true
}

// 打开编辑模态框
function edit(row: ISubConference) {
  isDialogEdit.value = true
  dialogVisible.value = true
  merge(formModel, row)
}

function onConfirm() {
  // 这里写模态框确认逻辑
  if (isDialogEdit.value) {
    // 编辑，先服务器发起编辑请求
  }
  else {
    // 新增
  }

  dialogVisible.value = false
}

function onDialogClose() {
  formModel.id = -1
  formModel.title = ''
}
</script>

<template>
  <div class="sub-conference">
    <page-header title="会议演示" content="PageHeader" />
    <PageMain>
      TODO
    </PageMain>
    <FixedActionBar>
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </FixedActionBar>

    <el-dialog v-model="dialogVisible" :title="isDialogEdit ? '编辑' : '新增'" width="30%" center @closed="onDialogClose">
      <el-form :inline="true" :model="formModel">
        <el-form-item label="标题">
          <el-input v-model="formModel.title" placeholder="请输入会议议题的标题" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
